<template>
	<view>
		<view style="display: flex;justify-content: space-between;align-items: center;">
			<text style="font-weight: bold;font-size: 18px;">{{'企业列表'}}</text>
			<view class="selector" @click="selectorShow=true">
				<text style="margin:0 10upx">{{currentPark}}</text>
				<u-icon name="arrow-down" color="#fff" size="18"></u-icon>
			</view>
		</view>
		
		<u-picker :show="selectorShow" :columns="enterpriseList" keyName="name" @confirm='selectorConfirm'
			@cancel='selectorShow=false'></u-picker>
		<u-cell-group>
			<u-cell v-for="(item,index) in dynamicList" :key="index" :title="item.title" :label="'所属行业：'+item.label"
				:value="item.value"></u-cell>
		</u-cell-group>
		<switch-page :totalPages='5' :currentPage='1'></switch-page>
	</view>
</template>

<script>
	import switchPage from '../../components/switchPage.vue'
	export default {
		components: {
			switchPage
		},
		data() {
			return {
				selectorShow: false,
				currentPark: '全部',
				dynamicList: [{
					title: '佛山市XXXXXXX公司',
					value: 'B1座603',
					label: '贸易出口'
				}, {
					title: '佛山市XXXXXXX公司',
					value: 'B1座603',
					label: '贸易出口'
				}, {
					title: '佛山市XXXXXXX公司',
					value: 'B1座603',
					label: '贸易出口'
				}, {
					title: '佛山市XXXXXXX公司',
					value: 'B1座603',
					label: '贸易出口'
				}, {
					title: '佛山市XXXXXXX公司',
					value: 'B1座603',
					label: '贸易出口'
				}, {
					title: '佛山市XXXXXXX公司',
					value: 'B1座603',
					label: '贸易出口'
				}, {
					title: '佛山市XXXXXXX公司',
					value: 'B1座603',
					label: '贸易出口'
				}, {
					title: '佛山市XXXXXXX公司',
					value: 'B1座603',
					label: '贸易出口'
				}, {
					title: '佛山市XXXXXXX公司',
					value: 'B1座603',
					label: '贸易出口'
				}, {
					title: '佛山市XXXXXXX公司',
					value: 'B1座603',
					label: '贸易出口'
				}],
				enterpriseList: [[{
					name: '全部',
					id:1
				}, {
					name: 'A1座',
					id:2
				}, {
					name: 'B1座',
					id:3
				}, {
					name: 'C1座',
					id:4
				}]]
			}
		},
		methods: {
			selectorConfirm(val) {
				this.currentPark=val.value[0].name
				this.selectorShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selector {
		display: inline-block;
		color: #fff;
		display: flex;
		border-radius: 10upx;
		align-items: center;
		font-size: 15px;
		padding: 10upx 20upx;
		margin: 20upx 0;
		justify-content: flex-end;
		background-color: #2489ff;
	}
</style>
